<template>
  <!-- vp-raw的作用是隔绝vitepress样式对当前组件的样式影响 -->
  <div class="vp-raw">
    <vxe-button @click="searchEvent">刷新</vxe-button>

    <vxe-grid v-bind="gridOptions">
      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
/**
 * 分页信息
 */
const tablePage = reactive({
  /**
   * 总记录数
   */
  total: 0,
  /**
   * 当前页码
   */
  currentPage: 1,
  /**
   * 每页显示记录数
   */
  pageSize: 10,
})
const gridOptions = reactive({
  border: true,
  height: 530,
  /**
   * 表格是否处于加载中
   */
  loading: false,
  columnConfig: {
    resizable: true,
  },
  /**
   * 表格数据默认为空
   */
  data: [],
  columns: [
    { type: 'seq', width: 60 },
    { type: 'checkbox', width: 50 },
    { field: 'name', title: '姓名' },
    { field: 'nickname', title: '昵称' },
    { field: 'role', title: '角色' },
    { field: 'address', title: '地址', showOverflow: true },
  ],
})
const findList = () => {
  gridOptions.loading = true
  setTimeout(() => {
    gridOptions.loading = false
    tablePage.total = 10
    gridOptions.data = [
      { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: '1', age: 28, address: 'Shenzhen' },
      { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: '0', age: 22, address: 'Guangzhou' },
      { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: '1', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: '0', age: 23, address: 'Shenzhen' },
      { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: '0', age: 30, address: 'Shanghai' },
      { id: 10006, name: 'Test6', nickname: 'T6', role: 'Develop', sex: '0', age: 27, address: 'Shanghai' },
      { id: 10007, name: 'Test7', nickname: 'T7', role: 'Develop', sex: '1', age: 29, address: 'Shenzhen' },
      { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: '0', age: 32, address: 'Shanghai' },
      { id: 10009, name: 'Test9', nickname: 'T9', role: 'Develop', sex: '1', age: 30, address: 'Shenzhen' },
      { id: 10010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: '0', age: 34, address: 'Shanghai' },
    ]
  }, 300)
}
const searchEvent = () => {
  tablePage.currentPage = 1
  findList()
}
/**
 * 分页事件监听: 分页大小改变, 页号改变，都会触发该事件
 *
 * @param currentPage 当前页码
 * @param pageSize 每页显示记录数
 */
const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  findList()
}
findList()
</script>
